<template>
  <div style="width:100%; height:100%">
    <div id="container"style="width:100%; height:100%">
     
    </div>

    <div>
<el-tabs id='temp' v-model="activeName" v-show='doorEvent.isShow'
  @tab-click="handleClick" 
  type="border-card"
  style="background-color: white;">
    <el-tab-pane label="基本信息" name="first">
      <el-form label-width="80px">
        <el-form-item label="编号:" style="margin-bottom:0px; hight:30px;">
          <span>{{markerInfo.doorId}}</span>
        </el-form-item>
        <el-form-item label="设备号:" style="margin-bottom:0px;hight:30px;">
          <span>{{markerInfo.devId}}</span>
        </el-form-item>
        <el-form-item label="名称:" style="margin-bottom:0px;">
          <span>{{markerInfo.name}}</span>
        </el-form-item>
        <el-form-item label="部门:" style="margin-bottom:0px;">
          <span>{{markerInfo.deptName}}</span>
        </el-form-item>
        <el-form-item label="所属门禁:" style="margin-bottom:0px;">
          <span>{{markerInfo.accessName}}</span>
        </el-form-item>
        <el-form-item label="创建时间:" style="margin-bottom:0px;">
          <span>{{markerInfo.createTime}}</span>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="事件信息" name="second">
      <el-table :data='doorEvent.tableData'
      border stripe style='width:100%' size="mini"
      :highlight-current-row="true" ref="eventTable">
        <el-table-column width="60" label="编号" prop='id'></el-table-column>
        <el-table-column min-width="100" label="门卡" prop='cardDevId'></el-table-column>
        <el-table-column min-width="100" label="人员" prop='empName'></el-table-column>
        <el-table-column width="60" label="事件">
          <template slot-scope='scope'>
              <span v-if='scope.row.doorEvent==1'>进门</span>
              <span v-if='scope.row.doorEvent==2'>出门</span>
              <span v-if='scope.row.doorEvent==3'>无效卡</span>
          </template>
        </el-table-column>
        <el-table-column width="80" label="事件类型">
            <template slot-scope='scope'>
                <span v-if='scope.row.eventType==1'>开门</span>
                <span v-if='scope.row.eventType==2'>关门</span>
            </template>
        </el-table-column>
        <el-table-column width="80" label="事件触发">
            <template slot-scope='scope'>
                <span v-if='scope.row.trigger==1'>门卡</span>
                <span v-if='scope.row.trigger==2'>地图</span>
                <span v-if='scope.row.trigger==3'>其他</span>
            </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip='true' width="80" label="时间" prop='createTime'></el-table-column>
      </el-table>
      <el-pagination class='bone-top-10 my-el-pagination'
          @current-change="handleEventChange"
          :current-page="this.doorEvent.currentPage" 
          :page-size="this.doorEvent.pageSize" 
          :total="this.doorEvent.rowCount"
          layout="total, prev, pager, next, jumper">
      </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="操作" name="third">
      <el-button size="small" type="primary" @click='toOpen'>开门</el-button>
      <el-button size="small" type="primary" @click='toClose'>关门</el-button>
    </el-tab-pane>
  </el-tabs>
    </div>
  </div>
</template>




<script>
import Http from "@/components/utils/httpUtil";
// import Marker from './Marker'
import AMap from 'AMap'
var map
var infoWindow
export default {
  mounted: function() {
    this.init()
  },
  data(){
    return {
      //地图上所有的门
      doors: [],
      //点击弹窗数据
      infoWindowData: {
        title: '',
        content: []
      },
      //弹窗对象
      infoWindow: '',
      //弹窗中tab默认选项
      activeName: 'first',
      //当前marker点的信息
      markerInfo: {
        doorId: '',
        devId: '',
        name: '',
        deptName: '',
        createTime: '',
        accessId: '',
        accessName: ''
      },
      //弹窗中事件表格
      doorEvent: {
        tableData: [],
        currentPage: 1,
        pageSize: 5,
        rowCount: 0,
        isShow: false
      }
    }
  },

  methods: {
    init: function() {
      let userInfo = JSON.parse(localStorage.getItem('userInfo'))
      map = new AMap.Map('container', {
        center: [userInfo.lng, userInfo.lat],
        resizeEnable: true,
        zoom: userInfo.zoom
      })
      this.getDoors()
    },

    //获取本部门和下属部门的门
    getDoors(){
      let p = {}
      let url = '/door/listDoorContainChildren'
      Http.fetch(url,p)
      .then(res=>{
        this.doors = res.data
        this.doors.forEach(door=>{
          let marker = new AMap.Marker({
            content: `<div style='display:flex;flex-direction:column'>
              <img width='32px' height='32px' src='../../../static/images/icon/door.png'/>
              <span style='font-size:14px;color:red;white-space:nowrap;'>${door.name}</span></div>`,
            position: [door.lng, door.lat],
            map: map
          })
          AMap.event.addListener(marker, 'click',()=>{

            this.markerInfo.doorId = door.doorId
            this.markerInfo.devId = door.devId
            this.markerInfo.name = door.name
            this.markerInfo.deptName = door.deptName
            this.markerInfo.createTime = door.createTime
            this.markerInfo.accessId = door.accessId
            this.markerInfo.accessName = door.accessName
            this.activeName = 'first'

            this.infoWindowData.content = []
            this.infoWindowData.title = `${door.name}<span style="font-size:11px;color:#F00; margin-left:15px;">${door.deptName}</span>`
            this.infoWindowData.content.push(`编号: ${door.doorId}`)
            this.infoWindowData.content.push(`设备号: ${door.devId}`)
            this.infoWindowData.content.push(`名称: ${door.name}`)
            this.infoWindowData.content.push(`部门: ${door.deptName}`)
            this.infoWindowData.content.push(`创建时间: ${door.createTime}`)
            var infoWindow = new AMap.InfoWindow({
                isCustom: true,  //使用自定义窗体
                content: this.createInfoWindow2(this.infoWindowData.title, this.infoWindowData.content.join("<br/>")),
                offset: new AMap.Pixel(16, -50)
            });
            infoWindow.open(map, marker.getPosition());
          })
        })
      })
    },

     createInfoWindow2(title,content){
      var info = document.createElement("div");
      info.style.width = '600px'
      //定义头部
      var top = document.createElement('div')
      top.className = 'info-top'
      var titleD = document.createElement("div");
            titleD.className = 'info-title'
      var closeX = document.createElement("img");
      titleD.innerHTML = title;
      closeX.src = "https://webapi.amap.com/images/close2.gif";
      closeX.onclick = this.closeInfoWindow;
      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      //中间内容使用el-tab
      var middle = document.getElementById("temp")
      info.appendChild(middle)

      //定义底部
      var bottom = document.createElement("div");
      bottom.className = 'info-bottom'
      var sharp = document.createElement("img");
      sharp.src = "https://webapi.amap.com/images/sharp.png";
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      this.doorEvent.isShow = true
      return info
     },

    createInfoWindow(title,content){
      var info = document.createElement("div");
      info.style.width = '300px'
      //定义头部
      var top = document.createElement('div')
      top.className = 'info-top'
      var titleD = document.createElement("div");
            titleD.className = 'info-title'
      var closeX = document.createElement("img");
      titleD.innerHTML = title;
      closeX.src = "https://webapi.amap.com/images/close2.gif";
      closeX.onclick = this.closeInfoWindow;
      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      //定义中部内容
      var middle = document.createElement('div')
      middle.style.backgroundColor = 'white';
      middle.innerHTML = content;
      info.appendChild(middle);

      //定义底部
      var bottom = document.createElement("div");
      bottom.className = 'info-bottom'
      var sharp = document.createElement("img");
      sharp.src = "https://webapi.amap.com/images/sharp.png";
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    },
    //关闭信息窗体
    closeInfoWindow() {
        map.clearInfoWindow();
        this.doorEvent.isShow = false
    },

    //windowInfo中的tab切换事件
    handleClick(tab, event) {
      // console.log(tab, event);
      if(tab.name=='second'){
        this.loadDoorEvent()
      }
    },
    //加载门的事件信息
    loadDoorEvent(){
      let p = {}
      let url = '/doorEvent/listQuery'
      p.doorId = this.markerInfo.doorId
      this.doorEvent.tableData = []
      this.doorEvent.currentPage = 1
      this.doorEvent.pageSize = 5
      this.doorEvent.rowCount = 0
      p.start = (this.doorEvent.currentPage - 1) * this.doorEvent.pageSize
      p.num = this.doorEvent.pageSize
      Http.fetch(url,p)
      .then(res=>{
        this.doorEvent.tableData = res.data.rows;
        this.doorEvent.rowCount = res.data.total;
      })
    },
    //弹窗事件表格翻页
    handleEventChange(val){
      this.doorEvent.currentPage = val
      this.loadDoorEvent()
    },
    //开门事件
    toOpen(){
      this.$message({
        showClose: true,
        message: '开门',
        type: "success"
      });
    },
    //关门事件
    toClose(){
      this.$message({
        showClose: true,
        message: '关门',
        type: "warning"
      });
    }
  }
}
</script>

<style>
.info-top{
  display: flex;
  justify-content: space-between;
  /* width: 300px; */
  height: 33px;
  background-color: #f5f7fa;
  padding: 0 10px;
  border: 1px solid #d8dce5;
}
.info-title{
  display: flex;
  align-items: center;
}

.info-top img{
  width: 10px;
  height: 10px;
  margin-top: 10px;
  transition-duration: 0.25s;
}

.info-bottom{
    height: 0px;
    width: 100%;
    clear: both;
    text-align: center;
}

.el-form-item__content{
  line-height: 30px;
}
.el-form-item__label{
  line-height: 30px;
}
</style>
